<!--<!DOCTYPE html>-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>合美供销云平台</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./elementUI/index.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/rotation3D.css">
    <style>
        body{
            background-color: #292a38;
        }
        .rotation3D-baseMap{
            position: absolute; left: 10px; right: 0; top: 160px; margin: auto;
            width: 1312px; height: 516px;
            background: url("./admin/images/baseMap.png");
        }
        .rotation3D-baseMap::before{
            position: absolute; left: -12px; right: 0; top: 0; margin: auto; z-index: 99;
            width: 342px; height: 318px; display: block; content: '';
            background: url("./admin/images/baseLogo.png");
            animation: 10s bounceUpDown infinite;
        }
    </style>
</head>
<body>
<div id="app" style="padding: 50px;" v-cloak>
    <!--底座-->
    <div class="rotation3D-baseMap">
        <span style="position:absolute; top: 42%; left: 45%; color: #fff; font-weight: 700; z-index: 99;">合美供销云平台</span>  
    </div>
    <!--  -->
    <!--旋转3D-->
    <div id="rotation3D" class="rotation3D">
        <button class="center">中心</button>
        <div class="itemList">
            <div @click="handle(item.id,item.name,item.Path)" class="rotation3D__item" :class="item.type" v-for="item in itemList">
                <div class="scale">
                    <div class="baseImg"></div>
                    <div class="cont">
                        <i class="iconfont" :class="item.icon"></i>
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="lineList">
            <div  class="rotation3D__line" v-for="item in itemList" :class="item.type">
                <div v-if="item.type=='blue'" class="pos">
                    <svg width="10" height="400">
                        <path id="path1" d="M0 400, 0 0" stroke-dasharray="5,10"/>
                    </svg>
                    <div class="dot dot1 el-icon-caret-right"></div>
                </div>
                <div v-if="item.type=='yellow'" class="pos">
                    <svg width="10" height="400">
                        <path id="path2" d="M0 400, 0 0" stroke-dasharray="5,10"/>
                    </svg>
                    <div class="dot dot2"><i class="el-icon-close"></i></div>
                </div>
                <div v-if="item.type=='green'" class="pos" style="left: -16px;">
                    <svg width="50" height="400">
                        <path id="path3" d="M20 400 S 0 200, 20 0" stroke-dasharray="5,10"/>
                        <path id="path4" d="M20 400 S 40 200, 20 0" stroke-dasharray="5,10"/>
                    </svg>
                    <div class="dot dot3 el-icon-caret-right"></div>
                    <div class="dot dot4 el-icon-caret-right"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/rotation3D.js"></script>
<script type="text/javascript" src="./js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        //数据
        data: {
            itemList: [
                { name:'商品中心', type:'blue', icon:'icon-renyuanguanli', },//商品信息录入，导入
                { name:'价盘中心', type:'blue', icon:'icon-GPS', },//价格单
                { name:'营销中心', type:'blue', icon:'icon-a-lujishigong2x', },//活动
                { name:'客户中心', type:'blue', icon:'icon-shujufuwuzhongxin', },//客户中心
                { name:'订单中心', type:'blue', icon:'icon-shujufuwuzhongxin', },//订单中心
                { name:'库存中心', type:'blue', icon:'icon-liangchang', },//库存中心
                { name:'分销中心', type:'blue', icon:'icon-tanpuyashifuwu', },//分销中心
                { name:'结算中心', type:'blue', icon:'icon-lumianshigong', },//
                // { name:'系统中心', type:'blue', icon:'icon-tanpuyashifuwu', },//系统中心
                // { name:'生产服务中心', type:'blue', icon:'icon-lumianshigong', },//生产服务中心
                { name:'综合服务中心', type:'blue', icon:'icon-lumianshigong', }//综合服务中心
            ],
            loading:false,
        },
        mounted: function () {
            this.getData();
            new Rotation3D({
                id: '#rotation3D',
                farScale: 0.6,
                // farScale: 1,
                xRadius: 0,  //x半径压缩
                yRadius: 220,  //y半径压缩
                // yRadius: 0,  //y半径压缩
                // autoPlay:true,
                // autoPlayDelay:6000,
            })
        },
        methods: {
            getData(){
                const _this = this;
                $.ajax({
                    url: DomainName + '/getFirstMenuAction?token='+$.cookie('token'),
                    type: 'GET',
                    success: function (Data) {
                        _this.itemList = Data;
                    },
                    complete: function (XMLHttpRequest) {
					if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
						window.parent.document.location.href = XMLHttpRequest.getResponseHeader("Contentpath");
					}
				},
                })
            },
            handle(id,name,Path){
                sessionStorage.setItem("id", id)
                sessionStorage.setItem("name", name)
                sessionStorage.setItem("Path", Path)
                window.location.href = './index.html'
            }
        },
    });
</script>
</html>